import {createElement, render, renderDom} from './element'
import diff from './diff'
import patch from "./patch";

let virtualDom =   createElement('ul', {
    class: 'list'
}, [
    createElement('li', {class: 'item'}, ['a']),
    createElement('li', {class: 'item'}, ['b']),
    createElement('li', {class: 'item'}, ['c']),
    createElement('li', {class: 'item'}, ['d'])
])

let virtualDom2 =   createElement('ul', {
    class: 'list-group'
}, [
    createElement('li', {class: 'item'}, ['1']),
    createElement('div', {class: 'item xixi'}, ['b']),
    createElement('li', {class: 'item'}, ['5'])
])

let patches = diff(virtualDom, virtualDom2);
const el = render(virtualDom);

// feature 如果平级元素互换位置，会导致重新渲染
// feature 新增节点也不会被更新

//  给元素打补丁，重新更新视图ß
patch(el, patches);

renderDom(el, window.root);